<template>
	<div id="subtmpl">
		<div class="inleft div" @click="substrict">-</div>
		<div class="incenter div" v-text="count"></div>
		<div class="inright div"  @click="add">+</div>
	</div>
</template>

<script>
	export default {
		props: ['goodsid', 'goodsnum'],//存放从父组件传过来的商品id和商品的个数
		data() {
			return {
				count: 1, //存储购物商品数量
				//btnData存储的是需要传输到父组件的数据 goodsid是商品id type是点击的按钮类型
				btnData: {
					goodsid:0,
					type: 'add'
				}
			}
		},
		created() {
			//将从父组件获取的商品数量赋给count  
			this.count = this.goodsnum ;
		},
		methods: {
			substrict() {
				this.count--;
				if (this.count < 1) {
					this.count = 1;
				}
				this.sendMessage('substrict');
			},
			add() {
				this.count++;
				this.sendMessage('add');
			},
			//将从父组件获取的数据处理过后再返回到父组件 
			sendMessage(type) {
				this.btnData.type = type;
				this.btnData.goodsid = this.goodsid;
				
				//触发一个事件  发送一个值
				this.$emit('sendData', this.btnData);//发送数据到父组件
				//console.log(this.btnData);
			}
 		}
	}
</script>

<style scoped>
	#subtmpl {
		float: right;
		/*margin-right: 50px;*/
	}
	#subtmpl .div{
		width: 40px;
		height: 25px;
		line-height: 25px;
		border: 1px solid #000;
		display: inline-block;
		text-align: center;
	}
</style>